DPI Aware Application

DPI Aware Application

Each computer display has a specific resolution. Microsoft Windows allows the user to change the number of Dots per Inch (DPI) of the display. An application must be able to properly display at different resolutions. The most common DPI values are: 96, 120, 144 and 192. However, the user can set any DPI value in the Control Panel.
Cada monitor de la computadora tiene una resolución específica. Microsoft Windows le permite al usuario cambiar el número de Puntos Por Pulgada (DPI) del monitor. Una aplicación debe ser capaz de mostrarse apropiadamente en resoluciones diferentes. Los valores más comunes para la DPI son: 96, 120, 144 y 192. Sin embargo, el usuario puede fijar cualquier valor de DPI en el Panel de Control.

Tip
As Bitmaps and Icons lose quality when they are resized, it is strongly recommended to have several bitmaps (or icons), one for each resolution. For instance, suppose you would like to display a bitmap in a button, you will need four bitmaps: IDB_LOGO96, IDB_LOGO120, IDB_LOGO144 and IDB_LOGO192. The code below shows how to set the bitmap for the respective dpi value.
Como los Mapas de Bits y los Iconos pierden calidad cuando se cambian de tamaño, se recomienda tener varios mapas de bits (o iconos), uno para cada resolución. Por ejemplo, suponga que usted quisiera mostrar un mapa de bits en un botón, usted necesitará cuatro mapas de bits: IDB_LOGO96, IDB_LOGO120, IDB_LOGO144 y IDB_LOGO192. El código de abajo muestra cómo fijar el mapa de bits para el respectivo valor de dpi.

Program.cpp

CG::DDBitmap bitmapLogo;
const int dpi = Sys::Metrics::GetScreenDpi();
if (dpi <= 96)
{
     bitmapLogo.CreateFromResource(hInstance, IDB_LOGO96);
}
else if (dpi <= 120)
{
     bitmapLogo.CreateFromResource(hInstance, IDB_LOGO120);
}
else if (dpi <= 144)
{
     bitmapLogo.CreateFromResource(hInstance, IDB_LOGO144);
}
else
{
     bitmapLogo.CreateFromResource(hInstance, IDB_LOGO192);
}
btHelp.SetImage(bitmapLogo);


Toolbars

A toolbar has a set of buttons. Each button has an image. For a toolbar to properly display at different DPIs, you must have several icons with different sizes, and you must set the button size accordingly. The code illustrates how to retrieve the width of an icon for the current display DPI. If you are using an Image List, you can set up the list to resize the icons automatically saving you work. However, to improve the presentation of your application you can have an icon for a range of DPI values.
Una barra de herramientas tiene un conjunto de botones. Cada botón tiene una imagen. Para que una barra de herramientas se muestre en forma apropiada, usted debe tener iconos con tamaños diferentes, y usted debe fijar el tamaño del botón en forma apropiada. El código de abajo ilustra como retraer el ancho de un icono para el valor de DPI de la pantalla. Si usted está usando una Image List, usted puede configurar la lista para que los iconos cambien de tamaño automáticamente ahorrándole trabajo. Sin embargo, para mejorar la presentación de su programa usted puede tener un icono para un rango de valores de DPI.

DPI    Icon (SM_CXICON)    Small icon (SM_CXSMICON)  
9632x3216x16
12040x4020x20
14448x4824x24
19264x6432x32

Program.cpp
const int width_small_icon = Sys::Metrics::GetSmallIconWidth();
const int width_icon = Sys::Metrics::GetIconWidth();


Tip
When displaying GUI elements, it is convenient to use centimeters to describe the position and size of these elements. Then, the DPI value can be used to transform these values to pixels as shown in the program.
Cuando se muestra elementos GUI o se dibuja en la pantalla, es conveniente usar centímetros para describir la posición y el tamaño de estos elementos. Entonces, el valor de DPI puede ser usado para transformar estos valores a pixeles como se muestra en el programa.

Program.cpp
double cmBoxWidth = 10.5;
int pixelsBoxWidth = Sys::Convert::CentimetersToScreenPixels(cmBoxWidth);


Tip
The following code illustrates how to compute the icon size and the button size in a toolbar. The example supposes that the icon has seven images of different sizes. The function Sys::Metrics::GetBestIconSize() chooses the best icon size from the list of sizes for the current DPI.
El código siguiente ilustra como calcular el tamaño de un icono y el tamaño del botón en una barra de herramientas. El ejemplo supone que el icono tiene siete imágenes de distintos tamaños. La función Sys::Metrics::GetBestIconSize() escoge el mejor tamaño de icono de la lista de tamaños para la DPI usada.

Program.cpp
int iconSizes[] ={16, 20, 24, 32, 40, 48, 64};
const int pixelsIconSize = Sys::Metrics::GetBestIconSize(iconSizes, 7, Sys::Convert::CentimetersToScreenPixels(0.42333));
const int pixelsButtonSize = pixelsIconSize + Sys::Convert::CentimetersToScreenPixels(0.1);

© Copyright 2000-2021 Wintempla selo. All Rights Reserved. Jul 22 2021. Home